@charset "utf-8";
@import "common/_reset.scss";
*{
    margin: 0;
    padding: 0;
    list-style-type: none;
    text-decoration: none;
    font-size: 0;
}
html,body{
    width: 100%;
    height: 100%;
    background: url(../img/bg.jpg);
}
.web{
    width: 100%;
    height: 100%;
    color: #e7c598;
   
    .head{
        width: 100%;
        height: 2%;
        background: url(../img/bg.jpg);
        background: #bf0c21;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1;
    }
    // 主内容
    .content{
        height: 88%;
        width: 100%;
        position: absolute;
        top: 2%;
        left: 0;
        .infomBox{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            width: 65%;
            overflow: hidden;
            h2{
                font-size: 0.3rem;
                text-align: center;
                font-weight: normal;
                margin-bottom: 0.4rem;
            }
            .textinp{
                width: 80%;
                height: 0.4rem;
                background: #e7c598;
                border-radius:0.1rem; 
                margin: auto;
                margin-bottom: 0.15rem;
                padding: 0 0.18rem;
                position: relative;
                overflow: hidden;
                p{
                    float: left;
                    width: 45%;
                    font-size: 0.2rem;
                    line-height: 0.4rem;
                    color: #bf0c21;
                    padding-left: 0.1rem;
                }
                input{
                    float: right;
                    width: 45%;
                    line-height: 0.4rem;
                    background: #e7c598;
                    border: none;
                    outline: none;
                    font-size: 0.2rem;
                    padding-left: 0.1rem;
                    color: #bf0c21;
                    position: relative;
                    border-left:1px solid #bf0c21;
                }
                
            }
            
            .text{
                p{
                    font-size: 0.17rem;
                    text-align: center;
                    line-height: 0.25rem;
                }
            }
            .buttonBox {//文本框与按钮
                margin: 0 auto;
                margin-top: 0.5rem;
                width: 2.53rem;
                height: 0.47rem;
                position: relative;
                overflow: hidden;
                button {
                    width: 2.53rem;
                    line-height: 0.47rem;
                    border: none;
                    background: transparent;
                    border-radius: 0.1rem;
                    background: url(../img/确定.png) no-repeat;
                    background-size: 100%,100%;
                    font-size: 0.26rem;
                    color: #e7c598;
                    outline: none;
                }
                
                .yinY {
                    width: 0.22rem;
                    height: 0.47rem;
                    position: absolute;
                    top: 0;
                    left: -0.31rem;
                    background: #fff;
                    opacity: 0.3;
                    transform: skewX(-20deg);
                    animation-name: myYin;
                    animation-duration: 3.6s;
                    animation-iteration-count: 1;
                    animation-play-state: running;
                    animation-iteration-count:infinite;
                    
                }
                @keyframes myYin {
                    
                    0% {
                       transform: translateX(0PX)  skewX(-20deg);
                    }
                    10% {
                        transform: translateX(150PX) skewX(-20deg);
                    }
                    20%,70%,80%,90%{
                        transform: translateX(0PX) skewX(-20deg);
                    }
                    100% {
                        transform: translateX(0PX) skewX(-20deg);
                    }
                }
            }
        }
    }

    // home按钮
    .home{
        width: 100%;
        height: 10%;
        position: fixed;
        bottom: 0;
        left: 0;
        overflow: hidden;
        background: url(../img/bg.jpg);
        a{
            display: block;
            width: 0.41rem;
            height: 0.41rem;
            border-radius: 50%;
            background: #e7c598;
            position: fixed;
            right: 0.25rem;
            bottom: 0.25rem;
            text-align: center;
            i{
                border-radius: 50%;
                display: inline-block;
                line-height: 0.4rem;
                font-size: 0.35rem;
                color: #bf0c21;
            }
        }
    }
   
}
